<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="/css/normalize.css" />
    <link rel="stylesheet" href="/css/bootstrap.css">

    <style>
        body {
            width: 100vw;
            height: 100vh;
            background-color: #d7eded;
            background-size: cover;
        }

        .title {
            color: #FFFFFF;
            position: absolute;
            top: 10%;
            left: 5%;
            transform: translate(0, -50%);
        }

        .background {
            position: absolute;
            top: 50%;
            left: 10%;
            transform: translate(0, -50%);
        }

        .login {
            width: 30%;
            background: #F8F8F8;
            box-shadow: 2px 4px 10px -4px rgba(0, 0, 0, 0.25);
            border-radius: 6px;
            padding: 2%;
            position: absolute;
            top: 50%;
            left: 60%;
            transform: translate(0, -50%);
        }

        .info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 4%;
        }

        .userLogin {
            color: #10435d;
            font-size: 2em;
        }

        .userRegister {
            color: #B2B2B2;
            font-size: 2em;
            margin-left: 20px;
        }

        .edit {
            height: 5%;
            margin-top: 8%;
        }

        .btn-login {
            width: 100%;
            border-radius: 12px;
            color: white;
            height: 5%;
            margin-top: 8%;
        }

        a {
            text-decoration: none;
        }

        .atext {
            color: #CCCCCC;
        }

        .atext:hover {
            color: #D26F44;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="title">
    <h1>独角兽购物商城</h1>
</div>
<div class="background">
    <img src="img/background.png" style="width: 70%;">
</div>
<div class="login">
    <span class="userLogin">登录</span>
    <span class="userRegister"><a class="atext" href="register.jsp">注册</a></span>

    <form action="/login" method="post" onsubmit="return checkSubmit()">
        <input type="text" class="form-control edit" id="tuId" name="tuId" placeholder="用户名"
               aria-describedby="basic-addon1" onblur="nameBlur()" onfocus="nameFocus()">
        <span id="errName" style="color: red;display: none"></span>

        <input type="password" class="form-control edit" id="password" name="password" placeholder="密码"
               aria-describedby="basic-addon1" onblur="pswBlur()" onfocus="pwdFocus()">
        <span id="errPwd" style="color: red;display: none"></span>

        <img src="CaptchaServlet" id="captchaImg" onclick="reloadCaptcha()" alt="验证码">
        <input type="text" id="userCaptcha" name="userCaptcha" style="margin-top: 6%;"  onfocus="captFocus()">
        <span id="errCapt" style="color: red;">
           <%= session.getAttribute("errCapt")==null?"": session.getAttribute("errCapt")%>
        </span>
        <input type="hidden" id="captchaValue">
        <div class="info">
            <div class="mui-input-row mui-checkbox" style="color: #676767;margin-top: 10px;">
                <input name="Checkbox" type="checkbox" checked>
                <label>保存用户名3天</label>
            </div>

            <div class="mui-input-row mui-checkbox" style="color: #676767;margin-top: 10px;">
                <input name="Checkbox" type="checkbox" checked>
                <label>保存密码3天</label>
            </div>
            <div>
                <a href="#">
                    <font color="#cccccc">忘记密码？</font>
                </a>
            </div>
        </div>

        <button type="submit" class="btn btn-primary btn-login">登录</button>
    </form>

</div>
<script type="text/javascript">


    //点击切换验证码图片
    function reloadCaptcha() {
        var captchaImg = document.getElementById("captchaImg");
        captchaImg.src = "/CaptchaServlet?" + new Date().getTime(); // 添加时间戳以避免缓存
    }
    function captFocus(){
        var errCapt=document.getElementById("errCapt");
        errCapt.style.display="none";
    }
    //用户失去焦点校验 只能输入数字和字母
    function nameBlur(){
        //获取name文本框的值
        var name = document.getElementById("tuId").value;
        var errName=document.getElementById("errName");
        //输出到控制台
        console.log(name);
        // 使用正则表达式校验 文本框的输入合理性 只能输入大小写字母和数字
        var reg=/[A-Za-z0-9]+$/;
        //使用正则表达式校验 name值  name.trim() 去掉两边空格
        var result=reg.test(name.trim());
        //判断校验结果， 成功隐藏错误提示， 失败显示错误提示
        if(name!=null&&result){
            errName.style.display="none";
            return true;
        }else{
            errName.innerText="请输入正确的用户名";
            errName.style.display="";
            return false;
        }

    }
    //用户名文本框获取焦点， 隐藏错误信息
    function nameFocus(){
        var errName=document.getElementById("errName");
        errName.style.display="none";
    }
    //密码框失去焦点校验 只能输入数字和字母
    function pswBlur(){
        //获取password文本框的值
        var password = document.getElementById("password").value;
        var errPwd=document.getElementById("errPwd");
        //输出到控制台
        console.log(password);
        // 使用正则表达式校验 (6-12位字母、数字或字符,至少包含两种)
        var reg=/(?!\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{6,12}/
        //使用正则表达式校验 password
        var result=reg.test(password.trim());
        //判断校验结果， 成功隐藏错误提示， 失败显示错误提示
        if(password!=null&&result){
            errPwd.style.display="none";
            return true;

        }else{
            errPwd.innerText="请输入正确的密码";
            errPwd.style.display="";
            return false;
        }

    }
    //密码框获取焦点， 隐藏错误信息
    function pwdFocus(){
        var errPwd=document.getElementById("errPwd");
        errPwd.style.display="none";
    }

    //校验提交， 如果有账号密码邮箱校验失败，表单不能提交
    function checkSubmit(){
        //默认表单可以提交
        var flag=true;
        //验证用户名
        flag=nameBlur();
        if(flag){
            //用户名验证通过， 验证密码
            flag=pswBlur();
        }
        return flag;
    }
</script>

</body>


</html>
